<template>
  <div id="driverVehicle_box" ref="driveridentitybox">
    <div class="showcardphoto" v-show="showcardphoto">
      <div>
        <div class="showcardimg_box">
          <p v-if="licensePositiveUrl" @click="licensePositiveUpload">
            <img :src="licensePositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="licensePositiveUpload">
            <img src="@/assets/imgs/taxi_xsz_zheng@2x.png" />
            <span>点击上传</span>
          </p>
          <p v-if="licenseReverseUrl" @click="licenseReverseUpload">
            <img :src="licenseReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="licenseReverseUpload">
            <img src="@/assets/imgs/taxi_xsz_bei@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardtext">
          <h6>行驶证正反面</h6>
          <p>请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡</p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="cardcannelBtn">取消</span>
          <span class="cardupload" @click="licenseUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <div class="showcardphoto" v-show="showMancarphoto">
      <div>
        <div class="showcardimg_box">
          <p v-if="mancarUrl" @click="mancarReverseUpload">
            <img :src="mancarUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="mancarReverseUpload">
            <img src="@/assets/imgs/taxi_clxx_rchy@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardtext">
          <h6>人车合影</h6>
          <p>请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡</p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="cardcannelBtn">取消</span>
          <span class="cardupload" @click="mancarUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <div class="driver_top">
      <div class="driver_hx"></div>
      <div class="driver_one">
        <ul>
          <li class="ative">1</li>
          <li class="ative">2</li>
          <li class="ative">3</li>
          <li class="four">4</li>
        </ul>
      </div>
      <div class="driver_two">
        <ul>
          <li>
            <p class="text_ative">身份信息</p>
          </li>
          <li>
            <p class="text_ative">公司信息</p>
          </li>
          <li>
            <p class="text_ative">车辆信息</p>
          </li>
          <li>
            <p>从业信息</p>
          </li>
        </ul>
      </div>
    </div>
    <div style="margin-top:20px;postion:relative">
      <div class="card_number">
        <span>{{abbreviation}}</span>
        <i></i>
        <span @click="getCardNumber">
          <b>{{licenseplate}}</b>
          <img src="@/assets/imgs/sanjiao.png" />
        </span>
      </div>
      <md-field>
        <md-field-item name title="行驶证照片" align="right" arrow="arrow-right" :value="showpermittext" @click="showpermitphotoBtn"></md-field-item>
        <md-input-item ref="车牌号" title="车牌号" placeholder="请输入车牌号" align="right" v-model="cardNumber"></md-input-item>
        <md-input-item ref="车辆所有人" title="车辆所有人" placeholder="请输入车辆所有人" align="right" v-model="carpeople"></md-input-item>
        <md-field-item name title="车辆注册日期" align="right" arrow="arrow-right" :value="registrationDate" @click="registrationDateBtn"></md-field-item>
        <md-field-item name title="人车合影" align="right" arrow="arrow-right" :value="showMancartext" @click="showMancarphotoBtn"></md-field-item>
      </md-field>
    </div>
    <p class="drivervehicle_tip">注：同一辆出租车最多能被3人同时注册</p>
    <div class="companynextBtn" @click="drivervehicleBtn">
      <p>下一步</p>
    </div>
    <md-date-picker
      ref="datePicker"
      v-model="isDatePickerShow"
      :unit-text="unitText"
      title="车辆注册日期"
      :minDate="minDate"
      :maxDate="maxDate"
      :default-date="currentDate"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>
    <md-picker ref="picker" v-model="isshowCardNumber" :data="cardNumberData" :cols="2" is-cascade title="车牌号" @confirm="onPickerConfirm()"></md-picker>
  </div>
</template>
<script>
import { Icon, Field, FieldItem, InputItem, Toast, Dialog, DatePicker, Picker } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
import CardNumber from '@/common/cardNumber';
import { Base64 } from 'js-base64';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [Picker.name]: Picker,
    [DatePicker.name]: DatePicker
  },
  data() {
    return {
      Height: {
        height: ''
      },
      title: '完善车辆信息',
      showcardphoto: false,
      showpermittext: '待上传',
      showMancartext: '待上传',
      registrationDate: '请选择',
      showMancarphoto: false,
      minDate: new Date('1970/9/9'),
      maxDate: new Date(),
      currentDate: new Date(),
      unitText: ['', '', '', '', ''],
      isDatePickerShow: false,
      isshowCardNumber: false,
      cardNumber: '', // 车牌号
      abbreviation: '京',
      licenseplate: 'A',
      carpeople: '', // 车辆所有人
      driverUploadType: '',
      licensePositiveUrl: '', // 行驶证正面
      licenseReverseUrl: '', // 行驶证反面
      mancarUrl: '', // 人车合一
      licensePositiveUploadUrl: '', // 行驶证正面上传url
      licenseReverseUploadUrl: '', // 行驶证反面上传url
      mancarUploadUrl: '', // 人车合一上传url
      cardNumberData: CardNumber.getdriverArea()
    };
  },
  mounted() {
    this.getheight();
    // 回显车辆信息
    if (this.$route.query.driverId) {
      var params = {
        driverId: this.$route.query.driverId
      };
      Loading.show();
      http.post('/pakj/txDriver/getDriverCarInfo', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          if (!res.data.data.drivingLicensePhoto) {
            this.showpermittext = '待上传';
          } else {
            this.licensePositiveUrl = res.data.data.drivingLicensePhoto; // 行驶证正面照片
            this.licensePositiveUploadUrl = res.data.data.drivingLicensePhoto; // 行驶证正面照片
            this.showpermittext = '重新上传';
          }
          if (!res.data.data.drivingLicenseReversePhoto) {
            this.showMancartext = '待上传';
          } else {
            this.licenseReverseUrl = res.data.data.drivingLicenseReversePhoto; // 行驶证正面照片
            this.licenseReverseUploadUrl = res.data.data.drivingLicenseReversePhoto; // 行驶证正面照片
            this.showpermittext = '重新上传';
          }
          if (!res.data.data.first) {
            this.abbreviation = '京';
          } else {
            this.abbreviation = res.data.data.first;
          }
          if (!res.data.data.second) {
            this.licenseplate = 'A';
          } else {
            this.licenseplate = res.data.data.second;
          }
          if (!res.data.data.thirdly) {
            this.cardNumber = '';
          } else {
            this.cardNumber = res.data.data.thirdly;
          }
          if (!res.data.data.carHolder) {
            this.carpeople = '';
          } else {
            this.carpeople = res.data.data.carHolder; // 车辆所有人
          }
          if (!res.data.data.carRegTime) {
            this.registrationDate = '请选择'; // 车辆注册时间
          } else {
            this.registrationDate = moment(res.data.data.carRegTime, 'x').format('YYYY-MM-DD'); // 车辆注册时间
          }
          if (!res.data.data.carHolderPhoto) {
            this.mancarUrl = ''; // 人车合影
            this.showMancartext = '待上传';
          } else {
            this.mancarUrl = res.data.data.carHolderPhoto; // 人车合影
            this.mancarUploadUrl = res.data.data.carHolderPhoto; // 人车合影
            this.showMancartext = '重新上传';
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  },
  methods: {
    getheight() {
      this.Height.height = this.$refs.driveridentitybox.clientHeight + 'px';
    },
    // 行驶证正面
    licensePositiveUpload() {
      this.driverUploadType = '6';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 行驶证反面
    licenseReverseUpload() {
      this.driverUploadType = '7';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 人车合一
    mancarReverseUpload() {
      this.driverUploadType = '8';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 拉起app上传
    pullUpAppUpload(number) {
      /* eslint-disable */
      var type = {
        type: number
      };
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.driverUpload(JSON.stringify(type));
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.driverUpload.postMessage(JSON.stringify(type));
      }
      window.uploadcallback = this.uploadcallback;
    },
    uploadcallback(msg) {
      var data = JSON.parse(Base64.decode(msg));
      switch (String(data.type)) {
        // 6 行驶证正面
        case '6':
          this.licensePositiveUrl = data.url;
          break;
        // 7 行驶证反面
        case '7':
          this.licenseReverseUrl = data.url;
          break;
        // 8 人车合一
        case '8':
          this.mancarUrl = data.url;
          break;
        default:
          break;
      }
      console.log(data);
    },
    // 行驶证上传认证
    licenseUploadBtn() {
      if (!this.licensePositiveUrl) {
        Toast({
          content: '请上传行驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.licenseReverseUrl) {
        Toast({
          content: '请上传行驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      // 只对正面进行识别
      this.photoUpload(this.licensePositiveUrl);
      this.licensePositiveUploadUrl = this.licensePositiveUrl;
      this.licenseReverseUploadUrl = this.licenseReverseUrl;
    },
    // 人车合一
    mancarUploadBtn() {
      if (!this.mancarUrl) {
        Toast({
          content: '请上传人车合影',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.showMancarphoto = false;
      this.mancarUploadUrl = this.mancarUrl;
      this.showMancartext = '重新上传';
    },
    // 图片上传到后台进行识别
    photoUpload(url) {
      var params = {
        photoType: 3,
        url: url + '?x-oss-process=style/beijingregulatory'
      };
      Loading.show();
      http.post('/pakj/common/photoAnalysis', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.showcardphoto = false;
          this.showpermittext = '重新上传';
          let imgMsg = JSON.parse(res.data.data);
          if (imgMsg.result.carOwner) {
            this.carpeople = imgMsg.result.carOwner; // 车辆所有人
          }
          if (imgMsg.result.carNumberArea) {
            this.abbreviation = imgMsg.result.carNumberArea; // 车牌第一个字 京
          }
          if (imgMsg.result.carNumberCharacter) {
            this.licenseplate = imgMsg.result.carNumberCharacter; // 车牌第一字母 A
          }
          if (imgMsg.result.carNumberInput) {
            this.cardNumber = imgMsg.result.carNumberInput; // 车牌号
          }
          if (imgMsg.result.startDataString) {
            this.registrationDate = moment(imgMsg.result.startDataString, 'YYYYMMDD').format('YYYY-MM-DD'); // 车辆注册时间
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getCardNumber() {
      this.isshowCardNumber = true;
    },
    onPickerConfirm() {
      const values = this.$refs.picker.getColumnValues();
      let res = [];
      values.forEach(value => {
        res.push(value.text);
      });
      this.abbreviation = res[0]; // 省份简称
      this.licenseplate = res[1];
    },
    showpermitphotoBtn() {
      // 行驶证
      this.showcardphoto = true;
    },
    showMancarphotoBtn() {
      // 人车合影
      this.showMancarphoto = true;
    },
    cardcannelBtn() {
      this.showcardphoto = false;
      this.showMancarphoto = false;
    },
    registrationDateBtn() {
      this.isDatePickerShow = true;
    },
    onDatePickerConfirm() {
      this.registrationDate = this.$refs.datePicker.getFormatDate('yyyy-MM-dd');
    },
    drivervehicleBtn() {
      var reg = /^[0-9a-zA-Z]+$/;
      if (!this.licensePositiveUploadUrl) {
        Toast({
          content: '请上传行驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.licenseReverseUploadUrl) {
        Toast({
          content: '请上传行驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardNumber) {
        Toast({
          content: '请上输入车牌号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.cardNumber)) {
        Toast({
          content: '车牌号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.carpeople) {
        Toast({
          content: '请输入车辆所有人',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.registrationDate === '请选择') {
        Toast({
          content: '请选择车辆注册日期',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.mancarUploadUrl) {
        Toast({
          content: '请上传人车合影照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        driverId: this.$route.query.driverId,
        drivingLicensePhoto: this.licensePositiveUploadUrl, // 行驶证照片
        drivingLicenseReversePhoto: this.licenseReverseUploadUrl, // 行驶证反面照片
        carPlateNumber: this.abbreviation + this.licenseplate + this.cardNumber, // 车牌号
        carHolder: this.carpeople, // 车辆所有人
        carRegTime: moment(this.registrationDate).valueOf(), // 车辆注册时间
        carHolderPhoto: this.mancarUploadUrl // 人车合影照片
      };
      Loading.show();
      http.post('/pakj/txDriver/saveDriverCarInfo', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.$router.push({
            name: 'driverPractitioners',
            query: {
              driverId: this.$route.query.driverId,
              driverphone: this.$route.query.driverphone
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.card_number {
  position: absolute;
  top: 310px;
  left: 280px;
  width: 156px;
  height: 60px;
  border-radius: 6px;
  border: 1px solid rgba(224, 224, 224, 1);
  z-index: 100;
}

.card_number span {
  display: inline-block;
  line-height: 60px;
  height: 60px;
  width: 76px;
  text-align: center;
  overflow: hidden;
}

.card_number span b {
  font-weight: 400;
}

.card_number i {
  height: 40px;
  width: 1px;
  background-color: #999999;
  display: inline-block;
  line-height: 40px;
  position: absolute;
  top: 10px;
  left: 70px;
}

.card_number span img {
  width: 40px;
  position: relative;
  top: 8px;
}

.showcardphoto {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcardimg_box {
  width: 600px;
  margin: auto;
}

.showcardimg_box p {
  margin-top: 20px;
  position: relative;
}

.showcardimg_box p img {
  width: 600px;
  height: 340px;
}

.showcardimg_box p span {
  width: 200px;
  height: 88px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  display: inline-block;
  line-height: 88px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 128px;
  left: 200px;
}

.showcardtext {
  margin-top: 20px;
}

.showcardtext h6 {
  text-align: center;
  font-size: 32px;
  color: #FF6917;
  font-weight: 400;
}

.showcardtext p {
  color: #fff;
  font-size: 28px;
  text-align: center;
  width: 450px;
  margin: auto;
  padding-top: 20px;
}

.cardBtn {
  margin: 20px 40px;
}

.cardcannel {
  width: 200px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #FF6917;
  background-color: #fff;
  border-radius: 10px;
}

.cardupload {
  width: 440px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #fff;
  background-color: #FF6917;
  margin-left: 30px;
  border-radius: 10px;
}

#driverVehicle_box {
  height: 100vh;
  background-color: color-primary-background;

  .driver_top {
    height: 180px;
    background: rgba(42, 42, 51, 1);
    padding: 0px 30px;
    font-size: 26px;
  }

  .driver_hx {
    height: 12px;
    width: 50%;
    background-color: #FF6917;
    position: absolute;
    top: 55px;
    left: 80px;
  }

  .driver_one {
    padding-top: 55px;
    margin: 0px 30px;
  }

  .driver_one ul {
    display: flex;
    justify-content: space-between;
    background-color: #E0E0E0;
    height: 12px;
  }

  .driver_one ul li {
    width: 40px;
    height: 40px;
    background-color: #B8B8B8;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    top: -15px;
    right: 2px;
  }

  .driver_one ul li.four {
    left: 4px;
  }

  .driver_one ul li.ative {
    background-color: #FF6917;
    color: #fff;
    border-radius: 50%;
  }

  .driver_two {
    margin-top: 30px;
  }

  .driver_two ul {
    display: flex;
    justify-content: space-between;
    color: #fff;
  }

  .driver_two ul li p.text_ative {
    color: #FF6917;
  }

  .companynextBtn {
    margin: 40px 20px 0px 20px;
  }

  .companynextBtn p {
    height: 98px;
    line-height: 98px;
    background-color: #FF6917;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
  }

  .drivervehicle_tip {
    font-size: 22px;
    color: #999;
    margin-top: 10px;
    margin-left: 30px;
  }
}
</style>
